<template>
  <div id="account">
    <Breadcrumb :pathContent="content" />
    <el-form :model="AdminUserAddRequest" ref="AdminUserAddRequest" label-width="100px" class="demo-ruleForm">
      <div class="information-page">
        <el-form-item class="information-title">
          <h1>基础信息</h1>
        </el-form-item>
        <div class="basic-information">
          <div class="information-left-page">
            <el-form-item label="登录账号" :required="true">
              <el-input v-model="AdminUserAddRequest.account" placeholder="请输入账号" disabled></el-input>
            </el-form-item>
            <div style="overflow: hidden;">
              <div class="information-left">
                <el-form-item label="姓名" :required="true">
                  <el-input v-model="AdminUserAddRequest.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
              </div>
              <div class="information-right">
                <el-form-item label="手机" :required="true">
                  <el-input v-model="AdminUserAddRequest.mobile" placeholder="请输入手机号码"></el-input>
                </el-form-item>
              </div>
            </div>
            <el-form-item label="部门" :required="true">
              <el-cascader :options="dept" :props="{ value: 'id', label: 'department', children: 'adminDepartments' }" v-model="depts" :show-all-levels="false" filterable change-on-select>
              </el-cascader>
            </el-form-item>
            <el-form-item label="职位">
              <el-input v-model="AdminUserAddRequest.position" placeholder="请输入职位"></el-input>
            </el-form-item>
            <el-form-item label="部门负责人" style="text-align: left;">
              <el-radio-group v-model="AdminUserAddRequest.responsible">
                <el-radio label="0">是</el-radio>
                <el-radio label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="information-left">
              <el-form-item label="Email">
                <el-input v-model="AdminUserAddRequest.email" placeholder="请输入邮箱"></el-input>
              </el-form-item>
            </div>
            <div class="information-right">
              <el-form-item label="QQ">
                <el-input v-model="AdminUserAddRequest.qq" placeholder="请输入QQ号码"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <div v-if="show">
          <el-form-item class="information-title page-title">
            <h1>账号权限
              <label style="color: rgb(145, 160, 177); font-size: 12px; font-weight: 300; margin-left: 30px;">权限与角色关联, 这样该账号的角色可完成权限设置</label>
            </h1>
          </el-form-item>
          <el-form-item label="账号权限" class="group-page">
            <el-checkbox-group v-model="roles" @change="getRoles">
              <el-checkbox :label="item.id" :key="item.id" v-for="item in rolesId">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <div class="permission-body">
              <div class="warpper" v-for="(item, index) in roleAuthorization" :key="index">
                <div class="warpper-body">
                  <div class="warpper-left">
                    <el-checkbox :label="item.funcName" name="type" v-model="item.selected" disabled>{{item.funcName}}</el-checkbox>
                  </div>
                  <div class="warpper-middel">
                    <div class="middel-child" v-for="(value, row) in item.children" :key="row">
                      <div class="middel">
                        <el-checkbox-group v-model="value.selected" v-if="value.url !== ''" >
                          <el-checkbox :label="value.funcName" name="type" disabled></el-checkbox>
                        </el-checkbox-group>
                      </div>
                      <div class="child-warpper">
                        <div class="child" v-for="(key,i) in value.children" :key="i">
                          <el-checkbox-group v-model="key.selected">
                            <el-checkbox :label="key.funcName" name="type" disabled></el-checkbox>
                          </el-checkbox-group>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="information-btn">
        <el-form-item>
          <el-button type="primary" @click="saveAccount">保存</el-button>
          <el-button @click="back">取消</el-button>
          <el-button @click="restPwd">重置密码</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getStaffAll, getDeptstaffAll, updateStaff, getRoleList, accountSetPassword, getcommRoles } from '@/public/js/setting'
// import { getStaffAll, getDeptstaffAll, getRoleList } from '@/public/js/setting'
const ButtonFooter = () => import('@/components/common/ButtonFooter')
const Breadcrumb = () => import('@/components/common/Breadcrumb')
export default {
  name: 'AddAccount',
  data () {
    return {
      content: {
        firstTitle: '设置',
        secondTitle: '编辑账号',
        type: 'close'
      },
      dept: [],
      depts: [],
      rolesId: [],
      roles: [],
      AdminUserAddRequest: {},
      account: '',
      id: null,
      show: true,
      node: [],
      parentNode: null,
      roleAuthorization: []
    }
  },
  created () {
    getDeptstaffAll().then(res => {
      console.log('res***', res)
      if (res.data.errCode === 0) {
        this.dept = res.data.adminDepartments
      }
    })
    getStaffAll(this).then(res => {
      if (res.data.errCode === 0) {
        this.show = res.data.accountInfo.account !== 'admin'
        this.AdminUserAddRequest = res.data.accountInfo
        this.depts = res.data.accountInfo.departments
        this.account = this.AdminUserAddRequest.account
        this.AdminUserAddRequest.roles.forEach(e => {
          this.roles.push(e.id)
          this.getRoles()
        })
      }
    })
    // 获取全部角色
    getRoleList().then(res => {
      this.rolesId = res.data.adminRoles
    })
  },
  methods: {
    // searchTree
    getNode (json) {
      for (let i = 0; i < json.length; i++) {
        this.node.push(json[i].id)
        if (json[i].adminDepartments) {
          this.getNode(json[i].adminDepartments)
        } else {
          break
        }
      }
      console.log(this.node)
    },
    // 获取勾选角色权限
    getRoles () {
      let _data = {
        'timestamp': 0,
        'version': 'string',
        'operation': 'string',
        'roleId': this.roles
      }
      getcommRoles(_data).then(res => {
        this.roleAuthorization = res.data.roleFuncEntities
      })
    },
    // 保存
    saveAccount () {
      let data = {
        'timestamp': 0,
        'version': 'string',
        'operation': 'string',
        'id': this.AdminUserAddRequest.id,
        'name': this.AdminUserAddRequest.name,
        'mobile': this.AdminUserAddRequest.mobile,
        'dept': this.depts.length ? this.depts[this.depts.length - 1] : null,
        'email': this.AdminUserAddRequest.email,
        'qq': this.AdminUserAddRequest.qq,
        'position': this.AdminUserAddRequest.position,
        'responsible': this.AdminUserAddRequest.responsible,
        'roleId': this.roles
      }
      updateStaff(data).then(res => {
        if (res.data.errCode === 0) {
          this.$message.success('账号编辑成功')
          this.$router.go(-1)
        }
      })
    },
    back () {
      this.$router.go(-1)
    },
    // 重置密码
    restPwd () {
      this.$confirm('密码重置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          'timestamp': 0,
          'version': 'string',
          'operation': 'string',
          'id': this.AdminUserAddRequest.id,
          'oldPassword': '',
          'newPasswordOne': '',
          'newPasswordTwo': ''
        }
        accountSetPassword(data).then(res => {
          if (res.data.errCode === 0) {
            this.$alert('密码修改成功, 需要重新登录', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.$router.push('/')
              }
            })
          }
        })
      })
    }
  },
  components: {
    ButtonFooter,
    Breadcrumb
  }
}
</script>
<style lang="scss">
#account {
  margin-bottom: 63px;
  .el-cascader {
    width: 100%;
  }
}
.information-page {
  background: white;
  margin-top: 10px;
  .group-page {
    .el-form-item__content {
      text-align: left;
    }
  }
}
.page-title,
.title {
  margin-bottom: 0;
}

.group-page {
  margin-bottom: 0;
  .el-checkbox-group {
    float: left;
    margin-right: 20px;
  }
}

.foo-warpper {
  padding: 0 20px 20px 20px;
}

.information-page {
  padding: 20px;
  .basic-information,
  .account-permissions {
    overflow: hidden;
    .information-left-page {
      width: 47%;
      float: left;
    }
    .information-right-page {
      width: 47%;
      float: right;
    }
  }
  .basic-information {
    .information-left-page {
      .information-title {
        .el-form-item__content {
          margin-left: 0 !important;
        }
      }
      .area {
        text-align: left;
      }
    }
  }
  h1 {
    color: #45a2ff;
    text-align: left;
  }
}

.h-eight {
  height: 130px;
}
.line-h {
  width: 6%;
  line-height: 130px;
  text-align: center;
  border-right: 1px solid #e6e6e6;
}
.line-b-h {
  width: 4.5%;
  line-height: 4.5;
  border-right: 1px solid #e6e6e6;
}
.padding-b {
  line-height: 2;
  padding-bottom: 17px;
}
.padding-t {
  width: 73.4%;
  line-height: 2;
  padding-top: 22px;
  border-bottom: 1px solid #e6e6e6;
}
.hotel-l-bg {
  background-color: #eef1f9;
}

.el-select > .el-input {
  display: inline-block;
}

.information-left {
  width: 50%;
  float: left;
}
.information-right {
  width: 50%;
  float: left;
}
.information-title {
  .el-form-item__content {
    margin-left: 0 !important;
  }
}

.complexity {
  text-align: left;
  overflow: hidden;
  span {
    margin-top: 5px;
    line-height: 2;
    color: white;
    padding: 0 40px;
    text-align: center;
    display: inline-block;
    background-color: #e9ecf3;
    float: left;
    margin-right: 2px;
    font-size: 12px;
  }
}
.passwordbg {
  background-color: #1f88f0 !important;
}

.add-account .el-form .el-form-item label {
  text-align: right;
}
.permission-body {
     border-bottom: 1px solid #eef1f9;
   }
   .warpper {
     overflow: hidden;
     line-height: 30px;
   }
   .warpper-body {
     overflow: hidden;
     line-height: 28px;
     background-color: #eef1f9;
   }
    .warpper-left, .warpper-middle, .warpper-right {
      float: left;
      padding: 10px;
      text-align: left;
    }
    .warpper-left {
      width: 5%;
      background-color: #eef1f9;
    }
    .middel, .child {
      padding-left: 20px;
      float: left;
    }
    .child-warpper {
      width: 80%;
      float: left;
    }
    .middel {
      width: 10%;
      background-color: #e2e7f6;
      min-height: 100%;
    }
    .warpper-middel {
      overflow: hidden;
      width: 90%;
      line-height: 3.4;
      background-color: #fff;
      border-top: 1px solid #eef1f9;
    }
    .middel-child {
      display: flex;
      text-align: left;
      width: 100%;
    }
.information-btn {
  padding: 20px 0px 20px 55px;
  text-align: left;
  position: fixed;
  bottom: 0;
  background-color: white;
  box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.4);
  width: 79.7%;
  z-index: 1000;
  .el-form-item {
    margin-bottom: 0;
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
</style>
